import { useCollapsibleContent } from "@renderer/hooks/use-collapsible-content";
import { ChevronUp } from "lucide-react";
import { useTranslation } from "react-i18next";
import { MessageAttachments } from "../message-attachments";
import { LinkifiedText } from "./linkified-text";

interface MessageContentProps {
  messageId: string;
  content: string;
}

export function MessageContent({ messageId, content }: MessageContentProps) {
  const {
    isExpanded,
    shouldShowToggle,
    contentRef,
    handleToggle,
    contentStyle,
  } = useCollapsibleContent({ content });
  const { t } = useTranslation();

  return (
    <div className="rounded-lg bg-accent px-4 py-3">
      <MessageAttachments messageId={messageId} />

      <div className="relative">
        <div className="relative">
          <div
            ref={contentRef}
            className="overflow-wrap-anywhere w-full break-words break-all text-accent-fg"
            style={contentStyle}
          >
            <LinkifiedText text={content} />
          </div>

          {/* 底部模糊效果 */}
          {shouldShowToggle && !isExpanded && (
            <div className="pointer-events-none absolute right-0 bottom-0 left-0 h-16 bg-gradient-to-t from-10% from-accent via-40% via-accent/95 to-transparent" />
          )}
        </div>

        {shouldShowToggle && (
          <div className="flex h-8 items-center">
            <button
              onClick={handleToggle}
              className="flex items-center gap-1 text-muted-foreground text-sm transition-colors hover:text-foreground"
              type="button"
            >
              <ChevronUp
                className={`h-4 w-4 flex-shrink-0 transition-transform duration-200 ${
                  isExpanded ? "" : "rotate-180"
                }`}
              />
              <span className="select-none">
                {isExpanded ? t("common.collapse") : t("common.expand")}
              </span>
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
